/** * @Author: Joker * @Date: 2017/12/7 */
<template>
  <div>
    <el-dialog :close-on-click-modal="false" title="新建角色" :visible.sync="modal" width="600px" :before-close="handleClose">
      <div>
        <el-form :model="groupForm" :rules="rules" ref="groupForm" size="small" label-width="80px">
          <el-form-item label="角色名" prop="name">
            <el-input v-model.trim="groupForm.name"></el-input>
          </el-form-item>
          <!-- <el-form-item label="上级角色" prop="parent">
            <el-cascader :options="roleTree" change-on-select :props="{
                value: 'roleId',
                label: 'roleName',
            }" :show-all-levels="false" v-model="groupForm.parent" style="width: 100%">
            </el-cascader>
          </el-form-item> -->
          <el-form-item label="角色描述" prop="desc">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model.trim="groupForm.desc">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit('submit')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    formCheck,
    trim
  } from '../../../lib/utils';
  import {
    roleManagement
  } from "../../../service/service_zbw";
  export default {
    props: {
      addModal: {
        type: Boolean
      },
      roleTree: {
        type: Array
      }
    },
    data() {
      return {
        modal: this.addModal,
        groupForm: {
          name: '',
          //parent: [],
          desc: ''
        },
        rules: {
          name: [{
              required: true,
              message: '请输入角色名称',
              trigger: 'blur'
            },
            {
              max: 10,
              message: '长度不超过10个字符',
              trigger: 'blur'
            }
          ],
          desc: [{
              message: '请输入角色描述',
              trigger: 'blur'
            },
            {
              max: 50,
              message: '长度不超过50个字符',
              trigger: 'blur'
            }
          ],
        //   parent: [{
        //     type: 'array',
        //     required: true,
        //     message: '请一个上级角色',
        //     trigger: 'change'
        //   }],
        },
      };
    },
    methods: {
      /**
       * 提交信息
       */
      async submit(val) {
        let flag = formCheck(this, 'groupForm');
        if (flag) {
          let param = {
            roleDesc: this.groupForm.desc,
            roleName: this.groupForm.name,
            //parentId: this.groupForm.parent[this.groupForm.parent.length - 1]
          };
          let res = await roleManagement.createNewOne(param);
          if (res.success) {
            this.$emit('finish', res.obj);
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.handleClose();
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }
      },
      /**
       * 关闭模态框
       */
      handleClose() {
        this.modal = false;
        this.$emit('closeModal', this.modal);
        this.handleReset('groupForm');
      },
      /**
       * 清空表单
       */
      handleReset(name) {
        this.$refs[name].resetFields();
      }
    },
    watch: {
      addModal(newval) {
        if (newval) {
          this.modal = newval;
        }
      }
    }
  }

</script>
<style scoped>


</style>

